import React, { useState, useEffect } from 'react'
import { Table, Popconfirm, ConfigProvider, Button } from 'antd';

import { InfoCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/lib/locale/zh_CN';
import style from '../othercompon.module.css'
import axios from '../../../utils/myAxios';
import moment from 'moment';

export default function TableOrder() {
  // 获取到的table数据
  const [dataSource, setdataSource] = useState([]);
  // 总数据
  const [dataList, setdataList] = useState(null);
  // 获取到的分页数
  const [currentPage, setcurrentPage] = useState(1);
  // console.log(dataSource.length)

  // 请求后端数据，依赖currentPage
  useEffect(() => {
    axios.get('/orlg/selectAll', { params: { currentPage } }).then(res => {
      console.log(res.data.data)
      setdataSource(res.data.data.data)
      setdataList(res.data.data.countAll)
    })
  }, [currentPage]);

  const columns = [{
    title: '客户名称',
    dataIndex: 'customer',
    align: 'center',
    render: (customer) => {
      return customer.customerName
    }
  }, {
    title: '模块',
    dataIndex: 'module',
    align: 'center'
  },
  {
    title: '行为',
    dataIndex: 'behavior',
    align: 'center',
    render: (txt) => {
      console.log()
      if (txt === 1) {
        return (<span style={{ color: 'cornflowerblue' }}>行为</span>)
      }
      if (txt === 2) {
        return (<span style={{ color: 'pink' }}>修改</span>)
      }
      if (txt === 3) {
        return (<span style={{ color: '#359296' }}>其他</span>)
      }
    }
  },
  {
    title: '原因',
    dataIndex: 'reason',
    align: 'center',
    width: 200
  }, {

    title: '操作时间',
    dataIndex: 'time',
    align: 'center',
    render: (time) => {
      return moment(time).format("YYYY/M/DD HH:mm:ss")
    },
  }, {
    title: '操作员',
    dataIndex: 'employee',
    align: 'center',
    render: (employee) => {
      return employee.name
    }
  }, {

    title: '操作',
    dataIndex: '',
    render: (txt) => {
      return (
        <ConfigProvider locale={zhCN}>
          <Popconfirm
            title="确定要删除？"
            icon={<InfoCircleOutlined />}
            onConfirm={(e) => {
              // console.log('点击了确认',)
              // 调用删除函数
              deletMethod(txt)
            }}
            onCancel={(e) => {
              console.log('点击了取消')
            }}
          >
            <span style={{ color: 'red', fontSize: '13px' }}>删除</span>
          </Popconfirm>
        </ConfigProvider>
      )
    }
  }]
  // 删除操作
  const deletMethod = (txt) => {
    console.log(txt.id)
    setdataSource(dataSource.filter(data => data.id !== txt.id))
    axios.post(`/orlg/delete?id=${txt.id}`).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
  //清除操作
  const deletData = () => {
    axios.get('/orlg/deleteAll').then(res => {
      console.log(res)
    })
    setdataSource([])
  }
  return (
    <div className={style.tableItem}>
      <ConfigProvider locale={zhCN}>
        <Table columns={columns} dataSource={dataSource}
          pagination={{
            showQuickJumper: true,
            total: dataList,
            onChange: (counts) => {
              setcurrentPage(counts)
            }
          }}
          rowKey={item => item.id}
        />
      </ConfigProvider>
      <div className={style.pagingBox}>
        <Button type='primary' onClick={deletData}>清除数据</Button>
      </div>
    </div>
  )
}

